<template>
    <div class="marquee-container" :style="containerStyle">
      <div class="marquee-content" :style="contentStyle">{{ text }}</div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      text: {
        type: String,
        required: true
      },
      direction: {
        type: String,
        default: "left",
        validator: (value) => ["left", "right", "up", "down"].includes(value)
      },
      speed: {
        type: Number,
        default: 10
      }
    },
    computed: {
      containerStyle() {
        return {
          overflow: "hidden",
          position: "relative",
          width: "100%",
          height: "100%"
        };
      },
      contentStyle() {
        let animation = "";
        if (this.direction === "left") {
          animation = `marquee-left ${this.speed}s linear infinite`;
        } else if (this.direction === "right") {
          animation = `marquee-right ${this.speed}s linear infinite`;
        } else if (this.direction === "up") {
          animation = `marquee-up ${this.speed}s linear infinite`;
        } else if (this.direction === "down") {
          animation = `marquee-down ${this.speed}s linear infinite`;
        }
  
        return {
          whiteSpace: "nowrap",
          position: "absolute",
          animation
        };
      }
    }
  };
  </script>
  
  <style>
  @keyframes marquee-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  @keyframes marquee-right {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }
  
  @keyframes marquee-up {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }
  
  @keyframes marquee-down {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }
  
  .marquee-container {
    width: 100%;
    height: 30px; /* 设置合适的容器高度 */
  }
  
  .marquee-content {
    /* 设置合适的样式 */
  }
  </style>